<template>
    <div class = "login">
        <!--顶部大包围-->
        <div class = "login_container_top">
            <span>切换微信</span>
        </div>
        <!--输入框-->
        <div class = "login_input">
            <van-cell-group>
                <van-field v-model = "user.name" clearable label = "用户名" placeholder = "请输入用户名" />
                <van-field  v-model = "user.password"  clearable :type = "state.type" label = "密码" placeholder = "请输入密码"
                           :right-icon = "state.showPassword" @click-right-icon = "changePasswordMode" />
            </van-cell-group>
        </div>
        <!--立即登录-->
        <div class = "login_immediately">
            <van-button @click = "eventClickUserLogin" type = "primary"
                        class = "green-background font-size-17 edge-angle-normal">立即切换
            </van-button>
        </div>
    </div>
</template>

<script>
    import {Field, Icon, Button, CellGroup,Toast,Dialog}  from 'vant';
    export default {
        name: "login",
        components: {
            [Field.name]: Field, [Icon.name]: Icon, [Button.name]: Button, [CellGroup.name]: CellGroup
        },
        data() {
            return {
                state: {
                    type: 'password', // 密码框模式
                    showPassword: 'closed-eye' // 控制眼睛的睁开的闭合
                },
                user: {
                    name: '',
                    password: '',
                    openid: 'shadow'
                }, // 账号和密码的存储
                rules: {
                    name: [
                        {required: true, message: '请输入账号'}
                    ],
                    password: [
                        {required: true, message: '请输入密码'}
                    ]
                }
            }
        },
        mounted() {
            this.user.openid = window.sessionStorage.getItem('OpenId') || 'shadow';
            if (this.user.openid == 'shadow') {
                this.$store.dispatch('options/checkUserIdentity', {
                    callBack: (res) => {
                    },
                    success: (res) => {
                        this.controllerJumpToUserHome(res);
                    }
                });
            }
        },
        methods: {
            //控制眼睛和密码框的显隐
            changePasswordMode() {
                if (this.state.type == 'password') {
                    this.state.type = 'text';
                    this.state.showPassword = 'eye-o';
                } else {
                    this.state.type = 'password';
                    this.state.showPassword = 'closed-eye';
                }
            },
            eventClickUserLogin() {
                this.requestUserLoginOperate();
            },
            requestUserLoginOperate() {
                if (!this.user.name) {
                    Toast.fail('用户名不能为空');
                }else{
                    console.log(window.localStorage.getItem("OpenId"))
                    if(this.user.password){
                        var url = '/api/home/user/changewx',
                            params = {
                                name: this.user.name,
                                pwd: this.user.password,
                                token: this.$store.state.options.user.token,
                                openid:window.localStorage.getItem("OpenId")
                            };
                        this.$store.dispatch('options/userLoadingOperate', {
                            url,
                            data: params,
                            callBack: (res) => {
                                if(res['msg']=="存在已有账号,是否继续替换"){
                                    Dialog.confirm({
                                        title: '提示',
                                        message: res['msg']
                                    }).then(() => {
                                        // on confirm
                                        url = '/api/home/user/qdchangewx'
                                        this.$store.dispatch('options/userLoadingOperate', {
                                            url,
                                            data: params,
                                            callBack: (res) => {
                                                Toast.success(res['msg']);
                                                window.sessionStorage.clear();
                                                let user = {
                                                    token: res['data'].authKey,
                                                    shopMode: res['data'].retrospect_model,
                                                    oda: res['data'].userInfo
                                                }
                                                window.sessionStorage.setItem("user", JSON.stringify(user));
                                                console.log(window.sessionStorage.getItem("user"))
                                                this.controllerJumpToUserHome(res['data'].data.userInfo);
                                                // this.$router.push('/login');
                                                // window.sessionStorage.clear();
                                                // this.$router.push('/login');
                                            }
                                        });
                                    }).catch(() => {
                                        Toast.success("网络错误,请注销");
                                        // on cancel
                                    });
                                }else if(res['msg']="绑定成功"){
                                    Toast.success(res['msg']);
                                    window.sessionStorage.clear();
                                    let user = {
                                        token: res['data'].authKey,
                                        shopMode: res['data'].retrospect_model,
                                        oda: res['data'].userInfo
                                    }
                                    window.sessionStorage.setItem("user", JSON.stringify(user));
                                    console.log(window.sessionStorage.getItem("user"))
                                    this.controllerJumpToUserHome(res.data.userInfo);
                                    // this.$router.push('/login');
                                }else{
                                    console.log("tan")
                                    Toast.success(res['msg']);
                                }
                                // this.controllerJumpToUserHome(res.data.userInfo);
                            }
                        });
                    }else{
                        Toast.fail('密码不能为空');
                    }
                }
            },
            controllerJumpToUserHome(user) {
                if (user.groupid == 1) {
                    this.$router.push('/shop/index');
                } else if (user.groupid == 2) {
                    this.$router.push('/salesman/index');
                } else if (user.groupid == 3) {
                    this.$router.push('/temporaryDirector/index');
                } else if (user.groupid == 4) {
                    this.$router.push('/GeneralRepository/index');
                } else if (user.groupid == 5) {
                    this.$router.push('/reservoirManagement/index');
                } else if (user.groupid == 6) {
                    this.$router.push('/accounting/index');
                } else if (user.groupid == 7) {
                    this.$router.push('/SuperAdmin/index');
                }
            }
        }
    }
</script>

<style scoped lang = "scss">
    /*border-bottom: 1px solid #ebedf0;*/
    .login {
        /*顶部*/
        .login_container_top {
            width: 90%;
            margin: 3rem auto;
            display: flex;
            justify-content: space-between;
            align-items: center;

            span {
                &:nth-child(1) {
                    font-size: 2.2rem;
                    color: #333333;
                    font-weight: bold;
                }

                &:nth-child(2) {
                    font-size: 1.4rem;
                    color: #666666;
                    font-weight: 500;
                }
            }
        }

        /*账号密码输入框*/
        .login_input {
            width: 90%;
            margin: 0 auto;

            .van-cell {
                border-bottom: 1px solid #ebedf0;
            }
        }

        /*忘记密码选项*/
        .login_forgot_password {
            width: 90%;
            margin: 1rem auto;
            text-align: right;

            span {
                font-size: 1.3rem;
                font-weight: 500;
                color: #999999;
            }
        }

        /*立即登录按钮*/
        .login_immediately {
            width: 92%;
            margin: 2rem auto;

            .van-button {
                width: 100%;
            }
        }
    }
</style>
